import React, {FC, useEffect, useState} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TextInput,
  TouchableOpacity,
  LayoutAnimation,
} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';

import RadioProtocol from './RadioProtocol';

import {formatPhone, replaceBlank} from '../../../utils/StringUtil';

import icon_triangle from '../../../assets/icon_triangle.png';
import icon_eye_close from '../../../assets/icon_eye_close.png';
import icon_eye_open from '../../../assets/icon_eye_open.png';
import icon_exchange from '../../../assets/icon_exchange.png';
import icon_wx from '../../../assets/icon_wx.png';
import icon_qq from '../../../assets/icon_qq.webp';
import icon_close_modal from '../../../assets/icon_close_modal.png';
import {RootStackParamList} from '../../../../App';
import UserStore from '../../../stores/UserStore';
import Loading from '../../../components/widget/Loading';
import Toast from '../../../components/widget/Toast';
type PropsType = {
  setLoginType: (value: 'quick' | 'input') => void;
};
const InputLogin: FC<PropsType> = (props: PropsType) => {
  const {setLoginType} = props;
  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
  const [visible, setVisible] = useState<boolean>(false);
  const [phone, setPhone] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  const [loginEnabled, setLoginEnabled] = useState<boolean>(false);
  const [checked, setChecked] = useState<boolean>(false);
  const onLoginPress = async () => {
    if (!loginEnabled) {
      return;
    }
    if (!checked) {
      Toast.show('请同意并勾选用户协议');
      return;
    }
    const purePhone = replaceBlank(phone);
    UserStore.requestLogin(purePhone, password, (success: boolean) => {
      Loading.hide();
      if (success) {
        navigation.replace('MainTab');
      } else {
        Toast.show('用户名或密码错误');
      }
    });
  };
  useEffect(() => {
    if (phone.length === 13 && password.length === 6) {
      setLoginEnabled(true);
    } else {
      setLoginEnabled(false);
    }
  }, [phone, password]);

  return (
    <View style={styles.root}>
      <Text style={styles.titleTxt}>密码登录</Text>
      <Text style={styles.subTitleTxt}>未注册的手机号登录成功后将自动注册</Text>
      <View style={styles.phoneLayout}>
        <Text style={styles.phonePrefixTxt}>+86</Text>
        <Image source={icon_triangle} style={styles.triangleImg} />
        <TextInput
          style={styles.phoneInput}
          placeholder="请输入手机号码"
          placeholderTextColor="#bbb"
          maxLength={13}
          keyboardType="number-pad"
          autoFocus={false}
          value={phone}
          onChangeText={value => setPhone(formatPhone(value))}
        />
      </View>
      <View style={styles.passwordLayout}>
        <TextInput
          style={styles.passwordInput}
          placeholder="请输入密码"
          placeholderTextColor="#aaa"
          maxLength={6}
          keyboardType="number-pad"
          secureTextEntry={!visible}
          autoFocus={false}
          value={password}
          onChangeText={value => setPassword(value)}
        />
        <TouchableOpacity
          activeOpacity={0.7}
          onPress={() => setVisible(!visible)}>
          <Image
            source={visible ? icon_eye_open : icon_eye_close}
            style={styles.passwordEyeImg}
          />
        </TouchableOpacity>
      </View>
      <View style={styles.changeLayout}>
        <TouchableOpacity style={styles.verifyLayout}>
          <Image source={icon_exchange} style={styles.verifyImg} />
          <Text style={styles.verifyTxt}>验证码登录</Text>
        </TouchableOpacity>

        <Text style={styles.forgetPasswordTxt}>忘记密码?</Text>
      </View>
      <TouchableOpacity
        style={loginEnabled ? styles.loginButtonEnable : styles.loginButton}
        activeOpacity={loginEnabled ? 0.7 : 1}
        onPress={() => {
          onLoginPress();
        }}>
        <Text style={styles.loginTxt}>登录</Text>
      </TouchableOpacity>
      <RadioProtocol checked={checked} setChecked={setChecked} />
      <View style={styles.wxQQLoginLayout}>
        <TouchableOpacity>
          <Image source={icon_wx} style={styles.loginImg} />
        </TouchableOpacity>
        <View style={styles.loginDivider} />
        <TouchableOpacity>
          <Image source={icon_qq} style={styles.loginImg} />
        </TouchableOpacity>
      </View>
      <TouchableOpacity
        style={styles.closeBtn}
        onPress={() => {
          LayoutAnimation.spring();
          setLoginType('quick');
        }}>
        <Image source={icon_close_modal} style={styles.closeImg} />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    backgroundColor: 'white',
    flexDirection: 'column',
    alignItems: 'center',
    paddingHorizontal: 48,
    paddingTop: 40,
  },
  loading: {
    position: 'absolute',
    top: '50%',
  },
  titleTxt: {
    fontSize: 28,
    color: '#333',
    fontWeight: 'bold',
    marginTop: 56,
    marginBottom: 6,
  },
  subTitleTxt: {
    fontSize: 14,
    color: '#bbb',
  },
  phoneLayout: {
    width: '100%',
    height: 56,
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomColor: '#ddd',
    borderBottomWidth: 1,
    marginTop: 20,
  },
  phonePrefixTxt: {
    fontSize: 24,
    color: '#999',
    marginEnd: 4,
  },
  triangleImg: {
    width: 12,
    height: 6,
    resizeMode: 'contain',
    marginEnd: 8,
  },
  phoneInput: {
    fontSize: 24,
    color: '#333',
  },
  passwordLayout: {
    width: '100%',
    height: 56,
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomColor: '#ddd',
    borderBottomWidth: 1,
    marginBottom: 10,
  },
  passwordInput: {
    fontSize: 20,
    color: '#333',
    flex: 1,
  },
  passwordEyeImg: {
    width: 46,
    height: 23,
    resizeMode: 'contain',
    marginStart: 8,
  },
  changeLayout: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  verifyLayout: {
    flexDirection: 'row',
  },
  verifyImg: {
    width: 16,
    height: 16,
    resizeMode: 'contain',
    marginRight: 4,
    tintColor: '#1020ff',
  },
  verifyTxt: {
    fontSize: 12,
    color: '#1020ff',
  },
  forgetPasswordTxt: {
    fontSize: 12,
    color: '#1020ff',
    position: 'absolute',
    right: 0,
  },
  loginButton: {
    width: '100%',
    height: 48,
    backgroundColor: '#ddd',
    borderRadius: 24,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
  },
  loginButtonEnable: {
    width: '100%',
    height: 48,
    backgroundColor: '#ff2442',
    borderRadius: 24,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
  },
  loginTxt: {
    fontSize: 18,
    color: 'white',
  },
  wxQQLoginLayout: {
    width: '100%',
    flexDirection: 'row',
    paddingHorizontal: 20,
    marginTop: 60,
  },
  loginImg: {
    width: 40,
    height: 40,
    resizeMode: 'contain',
  },
  loginDivider: {
    flex: 1,
  },
  closeBtn: {
    position: 'absolute',
    top: 36,
    left: 24,
    padding: 10,
  },
  closeImg: {
    width: 20,
    height: 20,
    resizeMode: 'contain',
  },
});
export default InputLogin;
